<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Place Javascript AutoComplete Address and Fillin Address Fields</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">  
var placeSearch; //
var autocomplete;  //
  
// https://developers.google.com/places/documentation/details
// https://developers.google.com/maps/documentation/javascript/reference?hl=en#GeocoderAddressComponent
// first value is the address component type that is returned
// second value specifies if using the short or long name to populate field on page
var component_form = {
    'street_number': 'short_name',
    'route': 'long_name',
    'locality': 'long_name',
    'administrative_area_level_1': 'short_name',
    'country': 'long_name',
    'postal_code': 'short_name'};
  
function initialize() {
    // https://developers.google.com/maps/documentation/javascript/reference?hl=en#Autocomplete
	// establishment type is business name
	autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { types: [ 'geocode' ] });
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      fillInAddress();
    });
  }
  
 function fillInAddress() {
	var place = autocomplete.getPlace();
    
	// enable fields on page to recieve results from place
    for (var component in component_form) {
		document.getElementById(component).value = "";
		document.getElementById(component).disabled = false;
    }
    
	// 
    for (var j = 0; j < place.address_components.length; j++) {
		// address component type that is returned. for example street_name
		var att = place.address_components[j].types[0];
		// is the address component type from in the component_form defined above
		// component_form[att] in this case either short_name or long_name	
		if (component_form[att]) {
			var val = place.address_components[j][component_form[att]];
			document.getElementById(att).value = val;
		}
    }
  }
    
function geolocate() {
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(function(position) {
			var geolocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
			autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
		});
    }
}
</script>
<style>
body {
  font-family: sans-serif;
  margin: 0px;
  padding: 0px;
}
#locationField, #controls {
  position: relative;
  width: 480px;
}
#autocomplete {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}
.label {
  text-align: right;
  font-weight: bold;
  width: 100px;
  color: #303030;
}
#address {
  border: 1px solid #000090;
  background-color: #f0f0ff;
  width: 480px;
}
#address td {
  font-size: 10pt;
}
.field {
  width: 100%;
}
.slimField {
  width: 80px;
}
.wideField {
  width: 200px;
}
#locationField {
  height: 20px;
  margin-bottom: 2px;
}
</style>
</head>
<body onload="initialize()">
  <div id="locationField">
    <input id="autocomplete" placeholder="Enter your address" type="text"></input>
  </div>
  <table id="address">
    <tr>
      <td class="label">Street address</td>
      <td class="slimField"><input class="field" id="street_number" disabled="true"></input></td>
      <td class="wideField" colspan="2"><input class="field" id="route" disabled="true"></input></td>
    </tr>
    <tr>
      <td class="label">City</td>
      <td class="wideField" colspan="3"><input class="field" id="locality" disabled="true"></input></td>
    </tr>
    <tr>
      <td class="label">State</td>
      <td class="slimField"><input class="field" id="administrative_area_level_1" disabled="true"></input></td>
      <td class="label">Zip code</td>
      <td class="wideField"><input class="field" id="postal_code" disabled="true"></input></td>
    </tr>
    <tr>
      <td class="label">Country</td>
      <td class="wideField" colspan="3"><input class="field" id="country" disabled="true"></input></td>
    </tr>
  </table>
  
</body>
</html>
